<template>
	<m-layout class="layout-box flex-column flex-1 account" title="账号管理" gap="24">
		<m-block class="flex-1 flex-column" bg-color="unset">
			<view class="itemOne flex-column mb-20">
				<view class="flex-between flex-1  ai-center plr-24">
					<view class="flex">
						<m-avatar spa="20 0 20" :type="userinfo.headpicurl" size="100"></m-avatar>
						<view class="flex-column ml-12">
							<text class="fs28 fw-600 mb-8">{{userinfo.username}}</text>
							<text class="fs24">{{userinfo.nickname}}</text>
						</view>
					</view>
					<view class="fs24 loginBtn2 flex">
						<text class=" text-primary mr-12">●</text>
						<text>当前登录</text>
					</view>
				</view>
			</view>
			<view v-if="userList&&userList.length>0" class="itemOne flex-column mb-20" v-for="item in userList">
				<view class="flex-between flex-1  ai-center plr-24">
					<view class="flex" style="opacity: 0.7">
						<m-avatar spa="20 0 20" :type="item.headpicurl" size="100"></m-avatar>
						<view class="flex-column ml-12">
							<text class="fs28 fw-600 mb-8">{{item.username}}</text>
							<text class="fs24">{{item.nickname}}</text>
						</view>
					</view>
					<view class="flex">
						<view class="fs24 loginBtn" @click="itemFn(item,1)">切换</view>
						<view class="fs24 loginBtn3 ml-16" @click="itemFn(item,2)">删除</view>
					</view>
				</view>
			</view>
			<!-- 	<m-empty :list="userList" /> -->
		</m-block>
		<m-block>
			<m-button @click="Jump('/pages/login/login?goBack=true')">添加新账号</m-button>
		</m-block>
		<!-- 确定切换登录 -->
		<m-dialog title="提示" :loading="btnLoading" :showCancel="true" :isShow="exitsShow"
			@handleCancel="exitsShow = false;btnLoading = false;" @handleConfirm="handleConfirm">
			<view class="ta-center ptb-48">
				<template v-if="type==1">确定切换{{item.Phone}}登录？</template>
				<template v-if="type==2">确定删除{{item.Phone}}账号？</template>
			</view>
			<text v-if="type==1" class="fs24 text-red">温馨提示：登录密码修改后需删除账号重新登录</text>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import cookie from '@/utils/auth.js'
	import { Login_Phone } from "@/api/Users.js"
	import { Decrypt } from "@/libs/fn/aes.js"
	export default {
		data() {
			return {
				item: {},
				exitsShow: false,
				btnLoading: false,
				type: 1,
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
			}),
			userList() {
				let arr = cookie.get('userlist') || []
				if (!arr.length) return
				return JSON.parse(arr).filter(item => item.Phone != this.userinfo.phone)
			}
		},
		onLoad() {},
		methods: {
			deleteFn() {
				this.btnLoading = true;
				let arr = cookie.get('userlist') || []
				let a = JSON.parse(arr).filter(one => one.Phone != this.item.Phone)
				cookie.set('userlist', JSON.stringify(a));
				setTimeout(() => {
					this.$router.go(0)
					this.exitsShow = false;
					this.btnLoading = false;
				}, 500)

			},
			itemFn(item, type) {
				this.type = type;
				this.item = item;
				this.exitsShow = true;
			},
			handleConfirm() {
				if (this.type == 1) this.exitsFn()
				if (this.type == 2) this.deleteFn()
			},
			// 切换
			async exitsFn() {
				this.btnLoading = true;
				await this.sleep(2000);
				const { success } = await Login_Phone({
					Phone: this.item.Phone,
					password: Decrypt(this.item.password)
				})
				this.btnLoading = false;
			},
		}
	}
</script>

<style lang="scss">
	.account {
		height: 100%;
		::v-deep .layout-content{
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}


	.itemOne {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
	}

	.loginBtn3 {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		border: 2rpx solid #FFD100;
		text-align: center;
		border-radius: 8rpx;
		color: #FFD100;
	}

	.loginBtn2 {
		top: -26rpx;
		position: relative;
		text-align: center;
		border-radius: 8rpx;
	}

	.loginBtn {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		background-color: #FFD100;
		border: 2rpx solid #FFD100;
		text-align: center;
		border-radius: 8rpx;
		color: #FFF;
	}
</style>